<template>
  <van-tabs v-model="active" type="card" color="#53cac3" class="lpp">
    <van-tab title="聊天" class="chat">
      <div class="message-show">
        <div class="meschat clear">
          <p>
            <span class="link">联系人</span>
            <van-button type="default" size="small" class="deal">极速处理</van-button>
          </p>
        </div>
        <div class="chatlist">
          <ul class="code">
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/mayun.jpg" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">马先生</span>
                    <span class="job">阿里巴巴CEO</span>
                    <span class="time">11月10日</span>
                  </p>
                  <p class="txt">抱歉,我现在才看到</p>
                </div>
              </li>
            </router-link>
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/dehua.png" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">刘先生</span>
                    <span class="job">饿了么 | 技术总监</span>
                    <span class="time">11月9日</span>
                  </p>
                  <p class="txt">你们还招人吗?</p>
                </div>
              </li>
            </router-link>
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/huimei.jpg" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">黄女士</span>
                    <span class="job">大众点评 | 技术总监</span>
                    <span class="time">11月9日</span>
                  </p>
                  <p class="txt">不好意思,我不考虑了.</p>
                </div>
              </li>
            </router-link>
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/huateng.jpg" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">马先生</span>
                    <span class="job">腾讯CEO</span>
                    <span class="time">11月8日</span>
                  </p>
                  <p class="txt">嗯嗯,好的.</p>
                </div>
              </li>
            </router-link>
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/xueyou.png" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">张先生</span>
                    <span class="job">美团点评 | 技术总监</span>
                    <span class="time">11月8日</span>
                  </p>
                  <p class="txt">我们什么时候开始面试呢?</p>
                </div>
              </li>
            </router-link>
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/mayun.jpg" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">马先生</span>
                    <span class="job">阿里巴巴CEO</span>
                    <span class="time">11月10日</span>
                  </p>
                  <p class="txt">抱歉,我现在才看到</p>
                </div>
              </li>
            </router-link>
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/dehua.png" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">刘先生</span>
                    <span class="job">饿了么 | 技术总监</span>
                    <span class="time">11月9日</span>
                  </p>
                  <p class="txt">你们还招人吗?</p>
                </div>
              </li>
            </router-link>
            <router-link :to="{path:'/news/interaction'}">
              <li class="clear">
                <div class="img-show">
                  <img src="./../../assets/huimei.jpg" alt />
                </div>
                <div class="introduction">
                  <p class="clear">
                    <span class="name">黄女士</span>
                    <span class="job">大众点评 | 技术总监</span>
                    <span class="time">11月9日</span>
                  </p>
                  <p class="txt">不好意思,我不考虑了.</p>
                </div>
              </li>
            </router-link>
          </ul>
        </div>
      </div>
    </van-tab>
    <van-tab title="互动">
      <div class="interaction">
        <van-tabs v-model="active2" color="#53cac3">
          <van-tab title="对我感兴趣">
            <div class="post-inf">
              <div class="middle-box">
                <div class="img-box">
                  <img src="./../../assets/wantyou.jpg" style="width:120px" />
                </div>
              </div>
              <div class="middle-txt">
                <p class="txt-box">还没有Boss对你感兴趣哦,快去主动联系吧</p>
              </div>
              <button class="find-job" @click="findjob">找职位</button>
            </div>
          </van-tab>
          <van-tab title="看过我">
            <div class="post-inf">
              <ul>
                <li class="comp-int" v-for="el in data" :key="el.uid">
                  <p class="clear">
                    <span class="job">{{el.titel}}</span>
                    <span class="salary">{{el.xinshui}}</span>
                  </p>
                  <p>
                    <span class="company">{{el.gname}}</span>
                    <span class="finance">未融资</span>
                  </p>
                  <p>
                    <span class="city">{{el.adderss}}</span>
                    <span class="year">{{el.gage}}</span>
                    <span class="education">{{el.xueli}}</span>
                  </p>
                </li>
              </ul>
            </div>
          </van-tab>
          <van-tab title="新职位">
            <div class="post-inf">
              <ul>
                <li class="comp-int">
                  <p class="clear">
                    <span class="job">前端开发工程师</span>
                    <span class="salary">6-8K</span>
                  </p>
                  <p>
                    <span class="company">湖南伟博</span>
                    <span class="finance">未融资</span>
                  </p>
                  <p>
                    <span class="city">长沙</span>
                    <span class="year">3-5年</span>
                    <span class="education">大专</span>
                  </p>
                  <p>
                    <img src="./../../assets/dehua.png" alt />
                    <span class="person">赵树波 · 人事经理</span>
                  </p>
                </li>
                <li class="comp-int">
                  <p class="clear">
                    <span class="job">前端工程师(微信小程序)</span>
                    <span class="salary">6-7K</span>
                  </p>
                  <p>
                    <span class="company">玩瞳科技</span>
                    <span class="finance">A轮</span>
                  </p>
                  <p>
                    <span class="city">长沙 岳麓区 麓谷</span>
                    <span class="year">1-3年</span>
                    <span class="education">本科</span>
                  </p>
                  <p>
                    <img src="./../../assets/huateng.jpg" alt />
                    <span class="person">李林 · 人事助理</span>
                  </p>
                </li>
                <li class="comp-int">
                  <p class="clear">
                    <span class="job">Web前端工程师</span>
                    <span class="salary">6-8K · 13薪</span>
                  </p>
                  <p>
                    <span class="company">豆子信息</span>
                    <span class="finance">未融资</span>
                  </p>
                  <p>
                    <span class="city">长沙 岳麓区 麓谷</span>
                    <span class="year">1-3年</span>
                    <span class="education">大专</span>
                  </p>
                  <p>
                    <img src="./../../assets/huimei.jpg" alt />
                    <span class="person">宋才良 · 总经理</span>
                  </p>
                </li>
                <li class="comp-int">
                  <p class="clear">
                    <span class="job">前端开发工程师</span>
                    <span class="salary">7-12K</span>
                  </p>
                  <p>
                    <span class="company">湖南数魔网络科技</span>
                    <span class="finance">A轮</span>
                  </p>
                  <p>
                    <span class="city">长沙</span>
                    <span class="year">1-3年</span>
                    <span class="education">本科</span>
                  </p>
                  <p>
                    <img src="./../../assets/mayun.jpg" alt />
                    <span class="person">肖杏 · HR</span>
                  </p>
                </li>
                <li class="comp-int">
                  <p class="clear">
                    <span class="job">小程序前端开发工程师</span>
                    <span class="salary">7-12K</span>
                  </p>
                  <p>
                    <span class="company">湖南智擎</span>
                    <span class="finance">A轮</span>
                  </p>
                  <p>
                    <span class="city">长沙 岳麓区 麓谷</span>
                    <span class="year">经验不限</span>
                    <span class="education">大专</span>
                  </p>
                  <p>
                    <img src="./../../assets/xueyou.png" alt />
                    <span class="person">汤莹 · 招聘</span>
                  </p>
                </li>
                <li class="comp-int">
                  <p class="clear">
                    <span class="job">前端工程师</span>
                    <span class="salary">10-12K</span>
                  </p>
                  <p>
                    <span class="company">酷陆科技</span>
                    <span class="finance">A轮</span>
                  </p>
                  <p>
                    <span class="city">长沙 岳麓区 梅溪湖</span>
                    <span class="year">1-3年</span>
                    <span class="education">本科</span>
                  </p>
                  <p>
                    <img src="./../../assets/dehua.png" alt />
                    <span class="person">刘鑫 · 运营总监</span>
                  </p>
                </li>
              </ul>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-tab>
  </van-tabs>
</template>
<script>
export default {
  data () {
    return {
      active: 0,
      active2: 2,
      newinfo: {},
      data: []
    }
  },
  created () {
    this.getInf()
    this.$store.state.activeinfo = 2
  },
  methods: {
    async getInf () {
      const res = await this.$http.get('/lists')
      // if (status !== 1) this.$Toast(message)
      // this.newinfo = message
      // console.log(message)
      const { msg, status, data } = res.data
      // console.log(data[0])
      this.data = data
      // console.log(this.data)
    },
    findjob () {
      this.$router.push('/position/worklist')
    }
  }
}
</script>
<style lang="less" scoped>
.clear:after {
  content: "";
  clear: both;
  display: block;
}
.van-tabs {
  /* position: relative; */
  padding-bottom: 46px;
}
html,
body {
  width: 100%;
}
a {
  color: #000;
}
.message-show {
  .meschat {
    border-bottom: 1px solid #ccc;
    p {
      height: 28px;
      .link {
        float: left;
        margin-left: 10%;
        font-size: 18px;
      }
      .deal {
        float: right;
        margin-right: 8%;
        background: #4dd599;
        font-size: 16px;
      }
    }
  }
  .chatlist {
    .code {
      li {
        border-bottom: 1px solid #ccc;
        padding: 12px 0;
      }
      .img-show {
        img {
          width: 52px;
          height: 50px;
          border-radius: 50%;
          float: left;
          margin-left: 10px;
        }
      }
      .introduction {
        float: left;
        margin-left: 6%;
        width: 76%;
        p {
          margin-top: 3px;
          margin-bottom: 3px;
        }
        .name {
          font-size: 18px;
          float: left;
        }
        .txt {
          font-size: 14px;
          color: #777;
        }
        .job,
        .time {
          font-size: 12px;
          color: #ccc;
          margin-top: 6px;
        }
        .job {
          margin-left: 10px;
          float: left;
        }
        .time {
          margin-right: 12px;
          float: right;
        }
      }
    }
  }
}
.interaction {
  .post-inf {
    .middle-box {
      display: flex;
      justify-content: center;
      align-items: center;
      .img-box {
        margin-top: 40%;
        img {
          width: 80px;
        }
      }
    }
    .middle-txt {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .find-job {
      margin-left: 38%;
      width: 90px;
      height: 30px;
      border: none;
      background: #4dd599;
    }
    .comp-int {
      margin-left: 6%;
      p {
        margin: 6px 0;
        .job {
          font-size: 15px;
          font-weight: 700;
          float: left;
        }
        .salary {
          font-size: 18px;
          color: #53cac3;
          float: right;
          margin-right: 8%;
        }
        .company {
          font-size: 16px;
          margin-right: 12px;
        }
        .finance {
          font-size: 16px;
        }
        .city,
        .year,
        .education {
          display: inline-block;
          height: 18px;
          background-color: #eee;
          margin-right: 12px;
          font-size: 14px;
          color: #666;
        }
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 16px;
        }
      }
    }
  }
}
.van-tabs--card > .van-tabs__wrap {
  height: 30px;
  width: 100%;
  background: #53cac3;
}
.comp-int {
  border-bottom: 1px solid #eee;
}
</style>
<style scoped>
.lpp >>> .van-tabs__wrap {
  height: 46px;
  background: pink;
}
.lpp >>> .van-tabs__nav {
  height: 50px;
  margin: 0;
}
.lpp >>> .van-tab {
  line-height: 46px;
}
.lpp >>> .van-tab--active {
  color: black;
  font-weight: bold;
}
</style>
